import { navigateTo } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import ButtonComp from "@/components/Button";
import Navbar from "@/components/Navbar";
import TenantCard from "@/components/TenantCard";
import userStore from "@/stores/UserStore";
import systemStore from "@/stores/SystemStore";
import { CommonUtil } from "@/utils/CommonUtil";
import "./index.less";
import { LeaseEntity } from "@/entities/LeaseEntity";
import leaseStore from "@/stores/LeaseStore";

const ExistTenant = () => {
  const { releaseTenant } = userStore;
  const { setCurrentRentBillTenant } = leaseStore;

  return (
    <Navbar mode="back" title="我的租客" bgColor="var(--mini-first)">
      <View
        className="exist-tenant-container"
        style={{ height: systemStore.haveNavbarNotTabbarHeight }}
      >
        {releaseTenant.map((lease: LeaseEntity.IExistLease, idx) => {
          const [year, month] = (lease.leaseDate as any).split("-");
          const nowYear = new Date().getFullYear();
          const nowMonth = new Date().getMonth() + 1;
          const isShowBillEntry = !(year == nowYear && month == nowMonth);
          return (
            <TenantCard
              key={idx}
              lease={lease}
              msgItemNode={
                <>
                  <View className="lease-item">
                    <Text>租赁时长：</Text>
                    <Text>{lease.leaseMonths}个月</Text>
                  </View>
                  <View className="lease-item">
                    <Text>入住日期：</Text>
                    <Text>{CommonUtil.formatUtcTime(lease.leaseDate)}</Text>
                  </View>
                  <View className="lease-item">
                    <Text>租赁到期日期：</Text>
                    <Text>
                      {CommonUtil.addMonthsToDate(
                        lease.leaseDate,
                        lease.leaseMonths
                      )}
                    </Text>
                  </View>
                </>
              }
              bottomNode={
                isShowBillEntry && (
                  <View className="btn-group">
                    <ButtonComp
                      title="去收租"
                      onClick={() => {
                        setCurrentRentBillTenant(lease);
                        navigateTo({ url: "/pages/fillRentBill/index" });
                      }}
                    />
                  </View>
                )
              }
            />
          );
        })}
      </View>
    </Navbar>
  );
};

export default ExistTenant;
